<template>
  <div class="app-container">
    <el-form ref="formData" :rules="rules" :model="formData" label-position="left" label-width="70px">
      <el-form-item v-show="!isEdit" label="ID">
        <el-input v-model="idFormat" disabled />
      </el-form-item>
      <el-form-item v-show="!isEdit" label="日期" prop="date">
        <el-date-picker v-model="date" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="标题" prop="biaoTi">
        <el-input v-model="formData.biaoTi" />
      </el-form-item>
      <el-form-item label="录音类型">
        <el-select v-model="formData.type" placeholder="请选择">
          <el-option
            v-for="item in shiJiType"
            :key="item._id"
            :label="item.title"
            :value="item.title"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="音频">
        <audio controls :src="formData.dmtUrl.adUrl" stle="width:100%;max-width:600px;" />
      </el-form-item>
      <el-form-item label="上传音频">
        <file-heaper id="adFile" @fileheaperchange="handFileHeaperChange" />
      </el-form-item>
      <el-form-item label="上传单张">
        <img-heper id="gepuFile" :src="formData.dmtUrl.gepuUrl" @imgheaperchange="handImgHeaperChange" @imgheaperclose="handImgHeaperClose" />
      </el-form-item>
      <el-form-item>
        <el-button @click="$router.push('hyList')">返回</el-button>
        <el-button type="primary" @click="updateData()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getHyId,
  getHyType,
  update
} from '@/cloudbaseapi/cloudbase-huayu'
import { loadingFull, dateFormat } from '@/cloudbaseapi/cloudbase-api'
import { Message } from 'element-ui'
import ImgHeper from '@/components/ImgHeper/index'
import FileHeaper from '@/components/FileHeaper/index'
export default {
  components: { ImgHeper, FileHeaper },
  // eslint-disable-next-line vue/require-prop-types
  props: ['isEdit'],
  data() {
    return {
      formData: {
        _id: '',
        biaoTi: '',
        dmtUrl: {
          adUrl: '',
          gepuUrl: ''
        },
        sort: 0,
        type: '录音类型'
      },
      shiJiType: [],
      rules: {
        // biaoTi: [{ required: true, message: '请输入标题', trigger: 'blur' }]
      },
      date: ''
    }
  },
  async activated() {
    await this.init()
  },
  computed: {
    // 计算ID的值
    idFormat() {
      if (this.date !== '' && this.formData.type !== '录音类型') {
        const typea = this.shiJiType.filter(item => {
          return item.title === this.formData.type
        })
        const ID = dateFormat(this.date, 'yyyyMMdd') + typea[0]['bianMa']
        if (!this.isEdit) {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.formData._id = ID
        }
        return ID
      } else {
        return ''
      }
    }
  },
  methods: {
    async init() {
      const load = loadingFull()
      await this.getSgbItemPagePage()
      if (this.isEdit) {
        const id = this.$route.query.id
        const data = await getHyId(id)
        this.formData = data.data[0]
      }
      setTimeout(() => {
        load.close()
      }, 500)
    },
    updateData() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const load = loadingFull()
          console.log(this.formData)
          update(this.formData, this.isEdit).then(res => {
            setTimeout(() => {
              load.close()
            }, 500)
            console.log('res=>', res)
            Message({
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            setTimeout(() => {
              load.close()
            }, 500)
            console.log(err)
            Message({
              message: '保存失败',
              type: 'error',
              duration: 2000
            })
          })
        } else {
          Message({
            message: '表单填写不规范请按要求填',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    async getSgbItemPagePage() {
      const data = await getHyType()
      this.shiJiType = data.data
    },
    handImgHeaperChange(val) {
      this.formData.dmtUrl.gepuUrl = val
    },
    handFileHeaperChange(val) {
      this.formData.dmtUrl.adUrl = val
    },
    handImgHeaperClose() {
      this.formData.dmtUrl.gepuUrl = ''
    }
  }
}
</script>

<style scoped>

</style>
